<template>
	
	<div style="width: 100%;">
		<div>
			<!--tab-->
			<div>
		        <tab :line-width="0" active-color="#8F3DC5">
			      <tab-item selected @on-item-click="onItemClick">
			      	<span class="iconfont icon-video"></span>视频
			      </tab-item>
			      <tab-item @on-item-click="onItemClick">
			      	<span class="iconfont icon-audio"></span>音频</tab-item>
			    </tab>
		    </div>
		    <!--视频、音频-->
		    <div v-show="change" style="width: 100%;height: 240px;">
		    	<img v-show="imgshow == true" :src="audioCoverImgUrl" style="width:100%; position: absolute;" @click="play"/>
		    	<video  id="video" webkit-playsinline playsinline :src="videoSrc" style="width: 100%;height: 100%;" controls >
				  	<source  type="video/mp4"></source>
				</video>
		    </div>
		    
		    
		    <div v-show="change == false" style="width: 100%;height: 240px;position: relative;">
		    	<img :src="audioCoverImgUrl" />
		    	<audio  :src="audioSrc" id="audio" style="width: 100%;position: absolute;top: 9.8rem;" controls>
		    		<source ></source>
				</audio>
		    </div>
			
			<!--标题-->
			
			<div style="padding-bottom: 15px;border-bottom: solid 1px #C7C7C7;padding-top: 5px;">
				<div class="column_bottom">
					<flexbox style="">
				      <flexbox-item :span="8"><div class="flex-demo" style="text-align: left;padding-left:0.5rem;">
				      	<flexbox>
					      <flexbox-item :span="2"><div class="flex-demo"><img class="userImg" :src="info.image"/></div></flexbox-item>
					      <flexbox-item><div class="flex-demo" style="text-align: left;"><div class="f15" style="font-size: 0.9rem;width: 8.5rem;overflow: hidden;height: 1.5rem;">{{info.name}}</div></div></flexbox-item>
					    </flexbox>
				      </div></flexbox-item>
				      <flexbox-item>
				      	<div v-if="section_info.stage == 0" class="flex-demo" style="color:#910A81 ;text-align: right;padding-right: 1rem;">免费</div>
				      	<div v-else class="flex-demo" style="color:#910A81 ;text-align: right;padding-right: 1rem;">第{{section_info.stage}}节</div>
				      </flexbox-item>
				    </flexbox>
				    
				    <flexbox>
				      <flexbox-item :span="8"><div style="padding-top: 5px;padding-left: 0.5rem;">
				      	{{section_info.title}} 
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo" style="margin-top: 10px;text-align: right;padding-right: 1.2rem;">
				      	<img @click="chagne" v-show="section_info.is_collection == false" style="width: 1.5rem;" src="../../static/image/heart281.png"/>
				      	<img @click="chagne" v-show="section_info.is_collection == true" style="width: 1.5rem;" src="../../static/image/heart280.png"/>
				      </div></flexbox-item>
				    </flexbox>
				    
				    <div style="padding-left: 10px;margin-top: 10px;color: #C7C7C7;font-size: 0.9rem;">
				    	<span>{{section_info.showtime}}更新</span>
				        <span style="margin-left: 20px;">时长：{{section_info.length_time}}</span>
				    </div>
				    
				</div>
			</div>
			
			
			<!--留言-->
			<div style="padding-bottom: 3rem;">
				
				<div style="padding: 0.5rem;border-bottom: solid 1px #c7c7c7;">
					<flexbox >
					      <flexbox-item :span="8"><div class="flex-demo" style="text-align: left;">
					      	用户留言
					      </div></flexbox-item>
					      <flexbox-item><div class="flex-demo" style="color:#910A81 ;text-align: right;">
					      	<button @click="write" style="background: #FF9913;color: #FFFFFF;border: none;padding: 5px;border-radius: 7px;">写留言</button>
					      </div></flexbox-item>
					   </flexbox>
				</div>
				
				<div v-for="(item,index) in comment_list">
					
					<div style="border-bottom: solid 1px #c7c7c7;padding-bottom: 10px;">
						<flexbox style="padding-top: 0.5rem;">
					      <flexbox-item :span="8"><div class="flex-demo" style="text-align: left;">
					      	
						     
						     <flexbox >
						      <flexbox-item :span="2"><div style="text-align: right ;">
						      	<img class="userImg" :src="item.avatar_url"/>
						      </div></flexbox-item>
						      <flexbox-item><div class="flex-demo" style="text-align: left;padding-left: 0.5rem;">
						      	<span >{{item.nickname}}</span>
						      </div></flexbox-item>
						    </flexbox>
					      </div></flexbox-item>
					      <flexbox-item><div class="flex-demo" >
					      	<flexbox >
						      <flexbox-item :span="9">
						      	<div style="text-align: right ;" @click="numAdd(index)">
							      <img v-show="item.is_like == '1'" style="width: 1.5rem;" src="../../static/image/recommend.png"/>
							      <img v-show="item.is_like == '0'" style="width: 1.5rem;" src="../../static/image/recommend1.png"/>
							    </div>
						      </flexbox-item>
						      <flexbox-item style="margin-left: 0;"><div class="flex-demo" style="text-align: left;padding-left: 0.2rem;">
						      	<span style="font-size: 1rem;">{{item.applaud}}</span>
						      </div></flexbox-item>
						    </flexbox>
					      </div></flexbox-item>
					    </flexbox>
					    <div style="padding-left: 47px;padding-right: 2rem;">{{item.comment}}</div>
					</div>
				</div>
				
			</div>
			
			
			
			<toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text="message" ></toast>
			
			
			<!--悬浮按钮-->
			<div>
				<button @click="offLine" style="width: 100%;padding: 10px;font-size: 1.3rem;background: #8D0878;color: #FFFFFF;border: none;position: fixed;bottom: 0;z-index: 999999;">报名线下课</button>
			</div>
		</div>
		
		
		
		
		<!--付费弹窗-->
		<div class="attr-picker" v-show="judge == true" @click="signOut">
			<div class="content-box">
				<div style="padding: 0.5rem;line-height: 2rem;">
					<div>课程：{{offLineDetail.name}}</div>
				    <div>时间：{{offLineDetail.time}}</div>
				    <div>地点：{{offLineDetail.area}}</div>
				    <div>价格：￥{{offLineDetail.price}}</div>
				</div>
				<div>
				    <div  @click.stop="clear">
				    	<group>
					      <x-switch @on-change="changeMoney(offvalue)" style="color: #8F3DC5;background: #F7F7F7;"  :title="offLineChange"  v-model="offvalue"></x-switch>
					    </group>
				    </div>
				    
				    
				    <div style="padding: 0.5rem 0;">
				    	<flexbox >
					      <flexbox-item :span="2"><div class="flex-demo" style="text-align: right;">
					      	数量：
					      </div></flexbox-item :span="6">
					      <flexbox-item><div  >
						    <div style="border: solid 1px #CBCBCB;padding: 0.4rem 0;">
						    	<flexbox>
							      <flexbox-item><div class="flex-demo" style="border-right: solid 1px #CBCBCB;" @click.stop="reduceNum">
							      	-
							      </div></flexbox-item>
							      <flexbox-item style="margin-left: 0;"><div class="flex-demo" >{{num}}</div></flexbox-item>
							      <flexbox-item><div class="flex-demo" style="border-left: solid 1px #CBCBCB;" @click.stop="addNum">
							      	+
							      </div></flexbox-item>
							    </flexbox>
						    </div>
					      	
					      </div></flexbox-item>
					      <flexbox-item ><div class="flex-demo"></div></flexbox-item>
					   </flexbox>
				    </div>
				    
				    
				    
			   </div>
			   
			   <div style="line-height: 3rem;">
			   	<flexbox>
					<flexbox-item><div class="flex-demo" style="background: #FFFFFF;color: red;">
						合计：￥{{offLineMoney}}
					</div></flexbox-item>
				    <flexbox-item><div @click.stop="settlement" class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;">
				    	结算
				    </div></flexbox-item>
				</flexbox>
			   </div>
					    
			</div>
			
		</div>
		
		
		<!--留言弹窗-->
		<div class="attr-picker" v-show="message == true" @click="signOut">
			<div class="message" style="position: absolute;top: 23.5rem;">
				<div style="height: 9rem;font-size: 2rem;">
					<textarea @click.stop="writeInput" v-model="content"  placeholder="写留言....." maxlength="200" style="border: none;width: 95%;height: 94%;border-bottom: solid 1px #949293;padding: 0.5rem;"></textarea>
				</div>
				<div style="line-height: 3rem;padding: 0 0.5rem;">
					<flexbox>
					<flexbox-item><div style="text-align: left;">
						用户名:{{user_info.nickname}}
					</div></flexbox-item>
				    <flexbox-item><div style="text-align: right;" >
				    	<button @click.stop="release" style="background: #FF9913;color: #FFFFFF;border: none;padding: 5px;border-radius: 7px;">发布</button>
				    </div></flexbox-item>
				</flexbox>
				</div>
				
		    </div>
		</div>
		
		
		<div @click="toHome" style="z-index: 9999999;position: fixed;bottom:3rem;left: 0.5rem;">
					
			<img src="../../static/image/shouye.png" style="width: 3rem;"/>
			
		</div>
		
		
	</div>

	
</template>



<script>
	
	import {base64, Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem, XSwitch, Group ,Toast} from 'vux'
	import wx from 'weixin-js-sdk'

	export default {
		
		components: {
		    Tab,
		    TabItem,
		    Sticky,
		    Divider,
		    XButton,
		    Swiper,
		    SwiperItem,
		    XSwitch,
		    Group,
		    Toast,
		    base64
		  },
		  
		  
		data (){
			return{
				offLineMoney:'',
				offLineTotalMoney:'',
				offLineTotal:'',
				offLineChange:'',
				offLineUser:'',
				offLineDetail:'',
				comment_list:'',
				info:'',
				section_info:'',
				lesson_id:'',
				section_id:'',
				change:true,
				offvalue:false,
				num:1,
				judge:false,
				transformation:false,
				message:false,
				content:'',
				access_token:'',
				
				user_info:'',
				message:'',
				showPositionValue:false,
				
				totalintegral:0,
				intergral:'',
				imgshow:true,
				audioCoverImgUrl:'',
				videoSrc:'',
				audioSrc:''
			}
		},
		methods:{
			
			//返回首页
			toHome(){
				
				this.$router.push({ path: '/'});
				
			},

			play(){
                
                var video=document.getElementById("video");
				if(video.paused){
				      video.play();
				      this.imgshow = false
				 }else{
				     video.pause();
				     this.imgshow = true
				}
		    },
			
			onItemClick (index) {

		      if(index == 0){
		      	this.change = true
		      	var audio=document.getElementById("audio");
				audio.pause();
		      	
		      }else{
		      	this.change = false
		      	var video=document.getElementById("video");
		      	video.pause();
		      }
		      console.log(this.change)
		    },
		    
		    
		    //退出
		    signOut(){
		    	this.judge = false,
		    	this.message = false
		    },
		    
		    //收藏
		    chagne(){
		    	
		    	this.section_info.is_collection = !this.section_info.is_collection,
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.post(this.$store.state.api + 'index/user-collection',
		    	{
		    		access_token:this.access_token,
		    		section_id:this.section_id,
		    	})
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.message = response.body.msg
				    this.showPositionValue = true
					
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
		    },
		    //写留言
		    write(){
		    	this.message = true,
		    	this.content = ''
		    },
		    
		    //发布留言
		    release(){
		    	this.message = false,
		    	

                this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.post(this.$store.state.api + 'index/add-comment',
		    	{
		    		access_token:this.access_token,
		    		section_id:this.section_id,
		    		user_id:this.user_info.id,
		    		comment:this.content
		    	})
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					
					this.getInformation()
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
		    	
		    	
		    },
		    
		    //点赞
		    numAdd(res){
		    	console.log(res)
		    	
		    	var commentList = this.comment_list
		    	
		    	console.log(this.comment_list[res].is_like)
		    	
		    	if(this.comment_list[res].is_like == 0){
		    		
		    		this.comment_list[res].is_like = 1
		    		this.comment_list[res].applaud = parseInt(this.comment_list[res].applaud) - 1
		    		
		    	}else{
		    		
		    		this.comment_list[res].is_like = 0
		    		this.comment_list[res].applaud = parseInt(this.comment_list[res].applaud) + 1
		    	}
		    	
		    	this.comment_list = this.comment_list
		    	
		    	console.log(this.comment_list)
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'index/like&access_token=' + this.access_token + '&comment_id=' + this.comment_list[res].id)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				}, (response) => {
	                 
	                 
				});
		    	
		    },
		    
		    writeInput(){
		    	
		    },
		    
		    
		    //获取详情
		    getDetail(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'index/section-info&lesson_id='+this.lesson_id+'&section_id='+this.section_id+'&access_token=' + this.access_token)
			    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.info = response.body.data.info,
					this.section_info = response.body.data.section_info
					this.audioCoverImgUrl = response.body.data.section_info.cover_pic
					this.videoSrc = response.body.data.section_info.video_info.PlayInfoList.PlayInfo[1].PlayURL
					this.audioSrc = response.body.data.section_info.audio_url
					
					
					localStorage.setItem("audioCoverImgUrl",response.body.data.section_info.cover_pic);
					this.desc = response.body.data.info.name					
					this.title = response.body.data.section_info.title
						
					
					
					this.$root.getShareDetail(this.desc,this.title,this.audioCoverImgUrl);
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				}, (response) => {
	                 
	                 
			 	});
		    },
		    
		    //获取人物信息
		    getUser(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		   	
			   	this.$http.get(this.$store.state.api + 'userdd/vip-index&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.user_info = response.body.data.user_info,
					console.log(this.user_info)
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				
				}, (response) => {
	                 
	                 
				});
				
		    },
		    
		    //获取留言信息
		    getInformation(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		   	
		   	    this.$http.get(this.$store.state.api + 'index/comment-info&access_token=' + this.access_token + '&section_id=' + this.section_id)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.comment_list = response.body.list
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				}, (response) => {
	                 
	                 
				});
		   	
		    },
		    
		    //线下选择器清除冒泡
		    clear(){},
	
		    //点击报名线下课
		    offLine(){
		    	this.judge = true,
		    	this.num = 1,
		    	this.offvalue = false
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'course-order/submit-preview&access_token=' + this.access_token + '&id=' + this.section_info.course_id)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.offLineDetail = response.body.data.course_info,
					this.offLineUser = response.body.data.user,
					this.offLineChange = '可用' + response.body.data.user.integral + '学分抵用' + response.body.data.user.integral2money +'元',
					this.offLineTotal = response.body.data.course_info.price,
					this.offLineTotalMoney = response.body.data.course_info.price,
					this.offLineMoney = response.body.data.course_info.price
					this.intergral = response.body.data.user.integral
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				}, (response) => {
	                 
	                 
				});
		    	
		    },
		    
		     //增加数量
		    addNum(){
		    	this.num = this.num+1
		    	console.log(this.num)
		    	this.offLineTotalMoney = parseFloat(this.offLineTotal) * parseFloat(this.num)
		    	this.offLineMoney = this.offLineTotalMoney
		    	
		    	if(this.offvalue == true){
	    			this.offLineMoney =  this.offLineTotalMoney - this.offLineUser.integral2money
	    		}else{
	    			this.offLineMoney = this.offLineTotalMoney
	    		}
		    	
		    },
		    
		    //减少数量
		    reduceNum(){
		    	if(this.num > 1){
		    		this.num = this.num-1,
		    		
		    		this.offLineTotalMoney = parseFloat(this.offLineTotal) * parseFloat(this.num)
		    		this.offLineMoney = this.offLineTotalMoney
		    		
		    		if(this.offvalue == true){
		    			this.offLineMoney =  this.offLineTotalMoney - this.offLineUser.integral2money
		    		}else{
		    			this.offLineMoney = this.offLineTotalMoney
		    		}
		    		
		    	}
		    },
		    
		    //开关选择
		    changeMoney(offvalue){
		    	
		    	if( offvalue == true ){
		    		
		    		this.totalintegral = this.intergral
		    		this.offLineMoney =  this.offLineTotalMoney - this.offLineUser.integral2money
		    	}else{
		    		
		    		this.totalintegral = 0
		    		this.offLineMoney = this.offLineTotalMoney
		    	}
		    	
		    	
		    },
		    
		    //线下课程结算
		    settlement(){
		    	
		    	this.judge = false,
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.post(this.$store.state.api + 'web-wechat-order/course-submit',
		    	{
		    		access_token:this.access_token,
		    		id:this.section_id,
		    		num:this.num,
		    		use_integral:this.totalintegral,
		    	})
		    	.then((response) => {
		    		
		    		console.log(response)
		    		this.message = response.body.msg
		    		this.showPositionValue = true
				
				if(response.body.code == 0) {
		
		            if(response.body.data.msg == '订单支付成功'){
						
						this.showPositionValue = true
						
					}else{
						
						WeixinJSBridge.invoke(
					        'getBrandWCPayRequest', {
					            'appId':response.body.res.appId,     //公众号名称，由商户传入     
					            'timeStamp':response.body.res.timeStamp,         //时间戳，自1970年以来的秒数     
					            'nonceStr':response.body.res.nonceStr, //随机串     
					            'package':response.body.res.package,     
					            'signType':response.body.res.signType,         //微信签名方式：     
					            'paySign':response.body.res.paySign //微信签名 
					        },
					        function(res){
					       	    console.log(res)
					            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
					        }
				        );
						
					}
		            
		            
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
				
				
		    },
		    
		    //获取地址栏信息
		getUrlStr(name){
	      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
	      if(reg.test(window.location.href)){
	        return unescape(RegExp.$2.replace(/\+/g," "))
	      }
	      return undefined
	    },	
		    
		    
		    
		},
		
		
		mounted(){
			
			if(this.$route.params.lesson_id != undefined){
				
				localStorage.setItem("lesson_id",this.$route.params.lesson_id);
	            localStorage.setItem("section_id",this.$route.params.section_id);
				
			}else if(this.getUrlStr('lesson_id') != undefined){
				
				localStorage.setItem("lesson_id",this.getUrlStr('lesson_id'));
	            localStorage.setItem("section_id",this.getUrlStr('section_id'));
				
			}
			
			this.lesson_id = localStorage.getItem('lesson_id');
	        this.section_id = localStorage.getItem('section_id');
	        
	        
	        
	        
			
			var access_token = this.getUrlStr('access_token');
            var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
           
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
              
              this.access_token = localStorage.getItem('access_token');
              this.$root.registerjudge();
//            this.$root.getShareDetail();
              
            }else{
            	
        	  this.$root.gotoWechat(locurl,parentId);
            }
            
//          if(localStorage.getItem('form') !=undefined){
//				  	
//			  	var newUrl = location.href.split('?')[0] + '#' + location.href.split('#')[1] +'?parent_id=' + localStorage.getItem('parent_id') + '&lesson_id=' + localStorage.getItem('lesson_id') + '&section_id=' + localStorage.getItem('section_id')
//			  	
//			}else{
//			  	
//			  	var newUrl = location.href.split('?')[0] +'?parent_id=' + localStorage.getItem('parent_id') + '&lesson_id=' + localStorage.getItem('lesson_id') + '&section_id=' + localStorage.getItem('section_id')
//			  	
//			}
//		
//			localStorage.setItem("newUrl",newUrl);
           
    	   this.access_token = localStorage.getItem('access_token');
			
			console.log(this.lesson_id)
			console.log(this.section_id)
			
			this.getDetail(),
			this.getInformation(),
			this.getUser()
			
		}
		
	}
	
	
</script>

<style>
	
	
	.f15{
		font-size: 0.8rem;
		color: #6C6A6B;
	}
	
	/*弹窗*/
	.attr-picker{
	    position: fixed;
	    bottom: 46px;
	    left: 0;
	    z-index: 999999999;
	    width: 100%;
	    height: 100%; 
	    background: rgba(0,0,0,.5);
	    display: flex;
	    justify-content: center;
	    align-items: center
	}
	.content-box{
		width: 100%;
		background: #F7F7F7;
		position: fixed;
		bottom: 46px;
	}
	/*留言弹窗*/
	.message{
	  width: 90%;
	  height: 12rem;
	  background: #FFFFFF;
	  border: solid 1rpx #949293;
	  border-radius: 1rem;
	  padding: 0.3rem;
	  z-index: 9999999999
	}
	/*开关*/
	.weui-switch, .weui-switch-cp__box {
	    height: 22px !important;
	}
	.weui-switch:after, .weui-switch-cp__box:after {
	    height: 20px !important;
	}
	
	
	input,button,select,textarea{outline:none} 
	
</style>